import {html, TemplateResult} from 'lit';
import type {Meta, StoryObj} from '@storybook/web-components';
import "../../../echarts/bar/lit-polar-bar.ts"
import {PolarBarProps} from "../../../echarts/bar/lit-polar-bar.ts";

const meta: Meta<PolarBarProps> = {
    title: 'Echarts/LitPolarBar',
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: 'tooltip，以及其他各类事件暂时无法在storybook中使用，具体请参考echarts的文档',
            },
        }
    },
    render: (args: PolarBarProps): TemplateResult => {
        return html`<lit-polar-bar
            .chartId=${args.chartId}
            .width=${args.width}
            .height=${args.height}
            .title=${args.title}
            .polar=${args.polar}
            .radiusAxis=${args.radiusAxis}
            .angleAxis=${args.angleAxis}
            .tooltip=${args.tooltip}
            .animation=${args.animation}
            .seriesData=${args.seriesData}
        />`;
    },
    argTypes: {
        chartId: { control: 'text' },
        width: { control: 'text' },
        height: { control: 'text' },
        title: { control: 'object' },
        polar: { control: 'object' },
        radiusAxis: { control: 'object' },
        angleAxis: { control: 'object' },
        tooltip: { control: 'object' },
        animation: { control: 'boolean' },
        seriesData: { control: 'object' },
    },
}

export default meta;
type Story = StoryObj<PolarBarProps>;

export const RadialPolarBar: Story = {
    args: {
        chartId: 'radial-polar-bar-chart',
        width: '600px',
        height: '600px',
        title: [{text: 'Radial Polar Bar Label Position (middle)'}],
        polar: {radius: [30, '80%']},
        radiusAxis: {max: 4},
        angleAxis: {type: 'category', data: ['a', 'b', 'c', 'd'], startAngle: 75},
        tooltip: {},
        animation: false,
        seriesData: [2, 1.2, 2.4, 3.6],
    },
};

export const TangentialPolarBar: Story = {
    args: {
        chartId: 'tangential-polar-bar-chart',
        width: '600px',
        height: '600px',
        title: [{text: 'Tangential Polar Bar Label Position (middle)'}],
        polar: {radius: [30, '80%']},
        radiusAxis: {
            type: 'category',
            data: ['a', 'b', 'c', 'd']
        },
        angleAxis: {
            max: 4,
            startAngle: 75
        },
        tooltip: {},
        animation: false,
        seriesData: [2, 1.2, 2.4, 3.6],
    },
}